<template>
  <div id="messageTag" class="allBox">
    <div style="position:relative;">
      <div style="position: absolute;left: 0px;top: 0px;">
        <img src="@/assets/信息背景.png" alt="" class="backgroundImage">
      </div>
      <div id="granaryName" style="position:absolute;left:25px;top:40px;font-size:16px;">{{tagCardsOpen}}</div>
      <div style="position:absolute;left:290px;top:25px">
        <img src="@/assets/温度.png" alt="" style="width:50px;">
      </div>

      <div style="position:absolute;left:330px;top:40px">
        <span id="temperature">{{temperature}}</span>℃
      </div>
      <div id="grain" style="position:absolute;left:170px;top:50px">
        <span id="grain">红豆</span>(吨)
      </div>
      <div style="position:absolute;left:80px;top:85px;font-size:60px;color:#00ffff;vertical-align:middle">
        <img id="grainImg" src="@/assets/豆子/红豆.png" alt="" style="width:60px;">
      </div>
      <div style="position:absolute;left:155px;top:80px;font-size:60px;color:#00ffff;vertical-align:middle">
        <span id="weight">{{ dataNumber }}</span>t
      </div>
      <div style="position:absolute;left:70px;top:170px;padding:8px 25px;border-radius:30px;border:1px solid #00ffff;">
        仓高—<span id="granaryHeight">12</span>m</div>
      <div style="position:absolute;left:225px;top:170px;padding:8px 25px;">
        粮高— <span id="grainHeight">5</span> m
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps, onMounted, watch, reactive, toRefs } from 'vue'
const props = defineProps({ // eslint-disable-line no-unused-vars
  tagCardsOpen: [Boolean, String]
  // opacity: {
  //   type: String,
  //   default: '默认值'
  // }
})
const context = reactive({
  // 随机一个新值
  dataNumber: Math.round(Math.random() * 1000),
  temperature: Math.round(Math.random() * 30)
})
const { dataNumber, temperature } = toRefs(context)
// 监听是否切换了新模型
watch(() => props.tagCardsOpen, (newD, oleD) => {
  if (newD) {
    // 有新数据随机一个值
    context.dataNumber = Math.round(Math.random() * 1000)
    context.temperature = Math.round(Math.random() * 30)
  }
})
onMounted(() => {

})
</script>
<script>
export default {
  name: 'tagCard'
}
</script>
<style lang="scss" scoped>
.allBox {
  // visibility: hidden;
  // display: none;
  opacity: 0;
  width: 500px;
  height: 400px;
  position: absolute;
  top: 150px;
  left: 200px;
  color: #fff;
  z-index: 99;
  font-size: 16px;
  transition: all 0.15s ease-in-out 0.16s;
  .backgroundImage {
    width: 400px;
    opacity: 1;
  }
}
@media (max-width: 768px) {
  .allBox {
    width: 400px;
    height: 400px;
    // .backgroundImage {
    //   width: 400px;
    //   opacity: 1;
    // }
  }
}
</style>
